<template>
  <div class="page-home">
    <banner name="home"></banner>

    <div class="row mt-3">
      <div class="col-md-9">
        <div class="box box-flush">
          <div class="box-body">
            <ul class="nav nav-pills">
              <li class="nav-item">
                <a class="nav-link" :class="{active: currentThreadsTab == 'default'}" href="javascript:;" @click="currentThreadsTab = 'default'">活跃</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" :class="{active: currentThreadsTab == 'featured'}" href="javascript:;" @click="currentThreadsTab = 'featured'">精选</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" :class="{active: currentThreadsTab == 'zeroComment'}" href="javascript:;" @click="currentThreadsTab = 'zeroComment'">零回复</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" :class="{active: currentThreadsTab == 'recent'}" href="javascript:;" @click="currentThreadsTab = 'recent'">最新发布</a>
              </li>
            </ul>
          </div>
          <threads-list :threads="threads[currentThreadsTab]" @page-changed="handlePageChanged"></threads-list>
        </div>
      </div>
      <div class="col-md-3">
        <guest-login-guide class="mb-2"/>
        <quick-docs class="mb-2"/>
        <hot-tags/>
        <user-ranking class="mt-2"/>
        <new-users class="mt-2"/>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "@components/banner";
import HotTags from "@components/hot-tags";
import UserRanking from "@components/user-ranking";
import NewUsers from "@components/new-users";
import QuickDocs from "@components/quick-docs";
import ThreadsList from "@components/threads-list";
import GuestLoginGuide from "@components/guest-login-guide";

export default {
  data() {
    return {
      threads: {
        default: {},
        featured: {},
        zeroComment: {},
        recent: {}
      },
      currentThreadsTab: "default"
    };
  },
  components: {
    Banner,
    QuickDocs,
    HotTags,
    UserRanking,
    NewUsers,
    ThreadsList,
    GuestLoginGuide
  },
  watch: {
    currentThreadsTab() {
      this.loadThreads(1);
    }
  },
  methods: {
    loadThreads(page = 1) {
      this.$http
        .get(`threads?tab=${this.currentThreadsTab}&page=${page}`)
        .then(threads => (this.threads[this.currentThreadsTab] = threads));
    },
    handlePageChanged(page) {
      this.loadThreads(page);
    }
  },
  mounted() {
    this.loadThreads();
  }
};
</script>
